/*
 * @Author: Yxliam
 * @Date: 2024-01-15 09:08:28
 * @LastEditors: Yxliam
 * @LastEditTime: 2024-01-20 10:52:03
 * @Description:
 */
import React, { memo, useState, useEffect,useRef } from "react";
import {
  View,
  Text,
  StyleSheet,
  ImageBackground,
  Image,
  Animated,
  TouchableOpacity,
  Modal,
} from "react-native";
import themeStore from "stores/theme";
import {
  ScrollView,
  GestureHandlerRootView,
} from "react-native-gesture-handler";
import { observer } from "mobx-react-lite";
import { p } from "../../utils/pxToDp";
import Ionicons from "@expo/vector-icons/Ionicons";
import Ypage from "../../components/YPage";
import Log from "./components/log";
import Completed from "./components/Completed";
import Vip from "./components/Vip";
import TopModal from "components/TopModal";
import { Image as ExpoImage } from "expo-image";
import { WIDTH } from "utils/theme/constants";
import { Modalize } from 'react-native-modalize';


import commonStyle from "utils/style";

const bgImg = {
  uri: "https://eat.toolbon.com/static/images/login.jpeg",
};

const Home = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const modalizeRef = useRef<Modalize>(null);
  const theme = themeStore.theme;
  const animated = new Animated.Value(0);
  const duration = 1000;
  useEffect(() => {
    updownAnimate();
  }, []);

  const updownAnimate = () => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(animated, {
          toValue: 0,
          duration: duration,
          useNativeDriver: true,
        }),
        Animated.timing(animated, {
          toValue: 5,
          duration: duration,
          useNativeDriver: true,
        }),
        Animated.timing(animated, {
          toValue: 0,
          duration: duration,
          useNativeDriver: true,
        }),
      ])
    ).start();
  };

  const openModal = () => {
    // setModalVisible(true);
    modalizeRef.current?.open();
  };

  const closeModal = () => {
    setModalVisible(false);
  };

  return (
    <Ypage style={[styles.container]} showNavBar={false} useTopInsert={false}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <ScrollView>
          <ExpoImage
            placeholder={"https://placeholder.idcd.com/720x600"}
            source={"https://eat.toolbon.com/static/images/login.jpeg"}
            style={[
              styles.backgroundImage,
              {
                width: WIDTH,
              },
            ]}
          ></ExpoImage>
          <View style={styles.top}>
            <View style={styles.content}>
              <View style={styles.facewrapper}>
                <ExpoImage
                  source={require("../../assets/boy.png")}
                  placeholder={
                    "https://placeholder.idcd.com/600x300?text=600x300"
                  }
                  style={styles.faceitem}
                  // transition={1000}
                />
                <Animated.View
                  style={[{ transform: [{ translateY: animated }] }]}
                >
                  <Ionicons
                    style={styles.heart}
                    name={"fitness"}
                    size={22}
                    color={"#FF598E"}
                  />
                </Animated.View>
                <ExpoImage
                  source={require("../../assets/girl.png")}
                  style={styles.faceitem}
                />
              </View>
              <View style={styles.datewrapper}>
                <View style={styles.row}>
                  <Text style={styles.day}>0</Text>
                  <Text style={styles.daylabel}>天</Text>
                </View>
                <View style={[styles.row, { marginTop: p(10) }]}>
                  <Text style={styles.date}>2024/01/15</Text>
                  <Text style={styles.week}>周二</Text>
                </View>
              </View>
            </View>
            <View style={styles.slidbar}>
              <TouchableOpacity onPress={openModal}>
                <Image
                  source={require("assets/change-bg-icon.png")}
                  style={styles.changebgicon}
                />
              </TouchableOpacity>
            </View>
          </View>

          <View
            style={[
              styles.bottomContainer,
              {
                backgroundColor: theme.bgcolor,
                flex: 1,
              },
            ]}
          >
            <View>
              <Log />
            </View>
            <View style={[commonStyle.flexrowcenterbetween]}>
              <Completed />
              <Vip />
            </View>
          </View>
        </ScrollView>
        <Modalize ref={modalizeRef}><Text>...your content</Text></Modalize>
      </GestureHandlerRootView>
      <TopModal visible={modalVisible} closeHandle={closeModal}>
        <View>
          <Text>这是内容区qqs111</Text>
        </View>
      </TopModal>
    
    </Ypage>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  top:{
    position:'absolute',
    top:0,
    left:0,
    right:0,
  },
  content: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    top: 0,
    zIndex: 1,
  },
  backgroundImage: {
    height: p(600),
  },
  bottomContainer: {
    position: "relative",
    top: -p(40),
    borderTopLeftRadius: p(30),
    borderTopRightRadius: p(30),
    paddingHorizontal: p(20),
    paddingVertical: p(20),
    paddingTop: p(50),
    paddingBottom: p(100),
  },
  faceitem: {
    borderColor: "white",
    borderWidth: 2,
    width: p(100),
    height: p(100),
    borderRadius: p(50),
  },
  facewrapper: {
    position: "absolute",
    left: 0,
    right: 0,
    top: p(200),
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  heart: {
    marginHorizontal: p(30),
  },
  datewrapper: {
    position: "absolute",
    left: 0,
    right: 0,
    top: p(350),
  },
  day: {
    color: "white",
    fontSize: p(80),
    fontWeight: "bold",
    marginRight: p(10),
  },
  daylabel: {
    color: "white",
    fontSize: p(30),
    fontWeight: "bold",
  },
  date: {
    color: "white",
    fontSize: p(25),
    fontWeight: "bold",
  },
  week: {
    color: "white",
    fontSize: p(25),
    fontWeight: "bold",
    marginLeft: p(10),
  },
  row: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  absoluteFacewrapper: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: -p(10),
    zIndex: 2,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  absolutefaceitem: {
    backgroundColor: "white",
    borderColor: "white",
    borderWidth: 2,
    width: p(100),
    height: p(100),
    borderRadius: p(50),
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 4,
  },
  facecontent: {},
  slidbar: {
    position: "absolute",
    right: p(30),
    top: p(100),
    zIndex: 2,
  },
  changebgicon: {
    width: p(60),
    height: p(60),
  },
});

export default observer(Home);
